/**
 * 向腾讯发送请求，获取疫情数据
 */
function getData() {
    $.ajax({
        url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5',
        dataType: 'jsonp',
        success: function (res) {
            // console.log(res.data)
            var data = JSON.parse(res.data)
            // console.log(data)
            center(data);
            right1(data);
            right2(data);

        }
    });

    $.ajax({
        url: 'https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList,chinaDayAddList,cityStatis,nowConfirmStatis,provinceCompare',
        dataType: 'json',
        success: function (res) {
            var data = res.data;
            // console.log(res.data)
            left1(data);
            left2(data);
        }
    })
};
getData();


$(function () {
    // 时间
    var todayTime = new Date();
    var todayTimeStr = `${todayTime.getFullYear()}年${todayTime.getMonth()+1}月${todayTime.getDate()}日 ${todayTime.getHours()}:${todayTime.getMinutes()}:${todayTime.getSeconds()}`;
    $("#time").html(todayTimeStr);
    setInterval(function () {
        var todayTime = new Date();
        var todayTimeStr = `${todayTime.getFullYear()}年${todayTime.getMonth()+1}月${todayTime.getDate()}日 ${todayTime.getHours()}:${todayTime.getMinutes()}:${todayTime.getSeconds()}`;
        $("#time").html(todayTimeStr);
    }, 1000);
});
$(function () {
    function getData() {
        $.ajax({
            url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5',
            dataType: 'jsonp',
            success: function (res) {
                // console.log(res.data)
                var data = JSON.parse(res.data)
                // console.log(data);
                $("#confirm").html(data.chinaTotal.confirm);
                $("#heal").html(data.chinaTotal.heal);
                $("#dead").html(data.chinaTotal.dead);
                $("#nowConfirm").html(data.chinaTotal.nowConfirm);
                $("#noInfect").html(data.chinaTotal.noInfect);
                $("#importedCase").html(data.chinaTotal.importedCase);

            }
        });
    };
    getData();
});

function center(data) {
    var map = echarts.init(document.getElementById('five'), "dark");
    var dataListAll = data.areaTree[0].children;
    var dataList = [];
    // let [{name,total:{confirm}}]=dataListAll;
    for (var i = 0; i < dataListAll.length; i++) {
        var area = dataListAll[i].name;
        var confirm = dataListAll[i].total.confirm;
        var jq = {
            name: area,
            value: confirm
        }
        dataList.push(jq);
    }
    var option = {
        title: {
            text: '',
        },
        tooltip: {
            trigger: 'item'
        },
        visualMap: { // 左侧小导航图标
            show: true,
            x: 'left',
            y: 'bottom',
            textStyle: {
                fontSize: 8,
            },
            splitList: [{ start: 1,end: 9 },
                {start: 10, end: 99 }, 
                { start: 100, end: 999 },
                {  start: 1000, end: 9999 },
                { start: 10000 }],
            color: ['#8A3310', '#C64918', '#E55B25', '#F2AD92', '#F9DCD1']
        },
        series: [{
            name: '累计确诊人数',
            type: 'map',
            mapType: 'china',
            roam: false, // 禁用拖动和缩放
            itemStyle: { // 图形样式
                normal: {
                    borderWidth: .5, //区域边框宽度
                    borderColor: '#009fe8', //区域边框颜色
                    areaColor: "#ffefd5", //区域颜色
                },
                emphasis: { // 鼠标滑过地图高亮的相关设置
                    borderWidth: .5,
                    borderColor: '#4b0082',
                    areaColor: "#fff",
                }
            },
            label: { // 图形上的文本标签
                normal: {
                    show: true, //省份名称
                    fontSize: 12,
                    // color:"#fff"
                    
                },
                emphasis: {
                    show: true,
                    fontSize: 12,
                }
            },
            data:dataList // [{'name': '上海', 'value': 318}, {'name': '云南', 'value': 162}]
        }]
    };
    // console.log(dataList);
    // var option = {
    //     tooltip: {
    //         triggerOn: "click",
    //         formatter: function (e, t, n) {
    //             return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
    //         }
    //     },
    //     visualMap: {
    //         min: 0,
    //         max: 1000,
    //         left: 26,
    //         bottom: 40,
    //         showLabel: !0,
    //         text: ["高", "低"],
    //         textStyle: {
    //             color: "#fff"
    //         },
    //         pieces: [{
    //             gt: 10000,
    //             label: "> 10000 ",
    //             color: "#8A3310"
    //         }, {
    //             gte: 1000,
    //             lte: 9999,
    //             label: "1000-9999",
    //             color: "#C64918"
    //         }, {
    //             gte: 100,
    //             lt: 999,
    //             label: "100-999",
    //             color: "#E55B25"
    //         }, {
    //             gt: 10,
    //             lte: 99,
    //             label: "10-99",
    //             color: "#F2AD92"
    //         }, {
    //             gte: 1,
    //             lte: 9,
    //             label: "1-9",
    //             color: "#F9DCD1"
    //         }],
    //         show: !0
    //     },
    //     geo: {
    //         map: "china",
    //         roam: !1,
    //         scaleLimit: {
    //             min: 1,
    //             max: 2
    //         },
    //         zoom: 1.23,
    //         top: 120,
    //         label: {
    //             normal: {
    //                 show: !0,
    //                 fontSize: "14",
    //                 color: "rgba(0,0,0,0.7)"
    //             }
    //         },
    //         itemStyle: {
    //             normal: {
    //                 borderWidth:.5,
    //                 borderColor:"#009fe8",
    //                 //shadowBlur: 50,
    //                 //shadowColor: 'rgba(0, 0, 0, 0.2)',
    //                 borderColor: "rgba(0, 0, 0, 0.2)"
    //             },
    //             emphasis: {
    //                 areaColor: "#f2d5ad",
    //                 shadowOffsetX: 0,
    //                 shadowOffsetY: 0,
    //                 borderWidth: 0
    //             }
    //         }
    //     },
    //     series: [{
    //         name: "确诊病例",
    //         type: "map",
    //         geoIndex: 0,
    //         data: dataList
    //     }]
    // };

    map.setOption(option);
}

function right1(data) {
    var Top10 = echarts.init(document.getElementById('six'), "dark");
    var dataListAll = data.areaTree[0].children;
    var dataList = [];
    // let [{name,total:{confirm}}]=dataListAll;
    for (var i = 0; i < dataListAll.length; i++) {
        var area = dataListAll[i].name;
        var confirm = dataListAll[i].total.confirm;
        var jq = {
            name: area,
            value: confirm
        }
        dataList.push(jq);
    }
    // console.log(dataList);
    function compare(property) {
        return function (a, b) {
            var value1 = a[property];
            var value2 = b[property];
            return value2 - value1;
        }
    }
    // console.log(dataList.sort(compare('value')));
    var paiList = dataList.sort(compare('value'))
    // console.log(paiList.splice(0,10));
    var Top10CityList = paiList.splice(0, 10);
    var areas = [];
    var confirms = [];
    for (var i = 0; i < Top10CityList.length; i++) {
        var area = Top10CityList[i].name;
        var confirm = Top10CityList[i].value;
        areas.push(area);
        confirms.push(confirm);
    }
    // console.log(areas);
    // console.log(confirms);
    var option = {
        title: {
            text: "全国确诊省市TOP10",
            textStyle: {
                color: 'white',
            },
            left: 'left'
        },
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            //指示器
            axisPointer: {
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        xAxis: {
            type: 'category',
            data: areas,// ['湖北','广州','北京']
            textStyle: {
                color: '#fff',
            },
        },
        yAxis: {
            type: 'value',
            //y轴字体设置
            axisLabel: {
                show: true,
                color: 'white',
                fontSize: 12,
                formatter: function (value) {
                    if (value >= 1000) {
                        value = value / 1000 + 'k';
                    }
                    return value;
                }
            },
        },
        series: [{
            data: confirms, // [582, 300, 100]
            type: 'bar',
            barMaxWidth: "50%"
        }]
    };
    Top10.setOption(option);
}

function right2(data) {
    var Top5 = echarts.init(document.getElementById('seven'), "dark");
    var dataListAll = data.areaTree[0].children;
    var dataListJW = [];
    for (var i = 0; i < dataListAll.length; i++) {
        var areaJW = dataListAll[i].name;
        var JWChildren = dataListAll[i].children;
        for (var j = 0; j < JWChildren.length; j++) {
            //  console.log(JWChildren[j].name);
            if (JWChildren[j].name == "境外输入") {
                var JW = {
                    name: areaJW,
                    value: JWChildren[j].total.confirm
                }
                dataListJW.push(JW);
            }
        }
    }
    // console.log(dataListJW);
    // console.log(dataList);
    function compare(property) {
        return function (a, b) {
            var value1 = a[property];
            var value2 = b[property];
            return value2 - value1;
        }
    }
    var jwList = dataListJW.sort(compare('value'))
    var Top5CityList = jwList.splice(0, 5);
    // console.log(Top5CityList);
    var jwareas = [];
    var jwconfirms = [];
    for (var k = 0; k < Top5CityList.length; k++) {
        var area = Top5CityList[k].name;
        var confirm = Top5CityList[k].value;
        jwareas.push(area);
        jwconfirms.push(confirm);
    }
    // console.log(jwareas);
    // console.log(jwconfirms);
    var option = {
        title: {
            text: '境外输入省市TOP5',
            top: 10,
            left: 'center',
            textStyle: {
                color: "#fff"
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: jwareas // ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
            {
                name: '省市名称',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                // data: [
                //     {value: 335, name: '直接访问'},
                //     {value: 310, name: '邮件营销'},
                //     {value: 234, name: '联盟广告'},
                //     {value: 135, name: '视频广告'},
                //     {value: 1548, name: '搜索引擎'}
                // ],
                data: Top5CityList,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    Top5.setOption(option);
}

function left1(data) {
    var two = echarts.init(document.getElementById('two'), "dark");
    // console.log(data);
    // console.log(data.chinaDayList)
    var date=[];
    var confirms=[];
    var heals=[];
    var deads=[];
    for(var i=0;i<data.chinaDayList.length;i++){
        var day=data.chinaDayList[i].date;
        var confirm=data.chinaDayList[i].confirm;
        var heal=data.chinaDayList[i].heal;
        var dead=data.chinaDayList[i].dead;
        date.push(day);
        confirms.push(confirm);
        heals.push(heal);
        deads.push(dead);

    }

    // console.log(date);



    var option = {
        title: {
            text: "全国累计趋势",
            textStyle: {
                color: 'white',
            },
            left: 'left',
        },
        tooltip: {
            trigger: 'axis',
            //指示器
            axisPointer: {
                type: 'line',
                lineStyle: {
                    color: '#7171C6'
                }
            },
        },
        //图例
        legend: {
            data: ['累计确诊', "累计治愈", "累计死亡"],
            left: "right"
        },
        //图形位置
        grid: {
            left: '4%',
            right: '6%',
            bottom: '4%',
            top: 50,
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: date //['03.20', '03.21', '03.22']
        }],
        yAxis: [{
            type: 'value',
            //y轴字体设置
            axisLabel: {
                show: true,
                color: 'white',
                fontSize: 12,
                formatter: function (value) {
                    if (value >= 1000) {
                        value = value / 1000 + 'k';
                    }
                    return value;
                }
            },
            //y轴线设置显示
            axisLine: {
                show: true
            },
            //与x轴平行的线样式
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#17273B',
                    width: 1,
                    type: 'solid',
                }
            }
        }],
        series: [{
            name: "累计确诊",
            type: 'line',
            smooth: true,
            data: confirms
        }, {
            name: "累计治愈",
            type: 'line',
            smooth: true,
            data:heals
        }, {
            name: "累计死亡",
            type: 'line',
            smooth: true,
            data: deads
        }]
    };
    two.setOption(option);
}
function left2(data){
    var three = echarts.init(document.getElementById('three'), "dark");
    // console.log(data.chinaDayAddList);
    var dates=[];
    var confirms=[];
    var suspects=[];
    for(var i=0;i<data.chinaDayAddList.length;i++){
        var date=data.chinaDayAddList[i].date;
        var confirm=data.chinaDayAddList[i].confirm;
        var suspect=data.chinaDayAddList[i].suspect;
        dates.push(date);
        confirms.push(confirm);
        suspects.push(suspect);
    }
    
    
    
    var option = {
        title: {
            text: '全国新增趋势',
            textStyle: {
                color: 'white',
            },
            left: 'left',
        },
        tooltip: {
            trigger: 'axis',
            //指示器
            axisPointer: {
                type: 'line',
                lineStyle: {
                    color: '#7171C6'
                }
            },
        },
        //图例
        legend: {
            data: ['新增确诊', '新增疑似'],
            left: 'right'
        },
        //图形位置
        grid: {
            left: '4%',
            right: '6%',
            bottom: '4%',
            top: 50,
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: dates
        }],
        yAxis: [{
            type: 'value',
            //y轴字体设置
            axisLabel: {
                show: true,
                color: 'white',
                fontSize: 12,
                formatter: function(value) {
                    if (value >= 1000) {
                        value = value / 1000 + 'k';
                    }
                    return value;
                }
            },
            //y轴线设置显示
            axisLine: {
                show: true
            },
            //与x轴平行的线样式
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#17273B',
                    width: 1,
                    type: 'solid',
                }
            }
        }],
        series: [{
            name: '新增确诊',
            type: 'line',
            smooth: true,
            data:  confirms
        }, {
            name: '新增疑似',
            type: 'line',
            smooth: true,
            data: suspects
        }]
    };
    three.setOption(option);
}